<template>
  <div class="shopcart" v-show="visible" @click="changeVisible">
    <div class="content" @click.stop="handleclick">
      <div class="title">
        <span>已选商品</span>
        <span @click="clean">清空</span>
      </div>
      <div v-if="shopcartlist.length != 0" class="list">
        <div v-for="(item, index) in shopcartlist" :key="index" class="good">
          <div class="imgbox">
            <img :src="item.picture" alt="" />
          </div>
          <div class="text">
            <div class="name">{{ item.name }}</div>

            <div class="price">
              <div>¥{{ item.min_price }}</div>
              <div>
                <span @click="request_shopcart_sub(item)">-</span>
                <span>{{ item.count }}</span>
                <span @click="request_shopcart_add(item)">+</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="empty">
        购物车空空如也,<span
          style="color: red"
          @click="$router.push('/myshouye/shouye')"
          >去逛逛!</span
        >
      </div>
    </div>
    
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      visible: false,
   
     
    };
  },
  computed: {
    ...mapState(["shopcartlist"]),
  
    
  },
  methods: {
    ...mapActions(["request_clear", "request_shopcart_sub", "request_shopcart_add"]),
    changeVisible() {
      this.visible = !this.visible;
    },
   
    clean() {
      this.request_clear();
    },
    handleclick() {},
  },
};
</script>

<style scoped>
.shopcart {
  position: fixed;
  bottom: 0;
  background-color: white;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.shopcart .title {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}
.shopcart .list {
  margin-bottom: 50px;
}
.shopcart .list .good {
  display: flex;
  margin: 10px 0;
}
.shopcart .list .good .imgbox {
  width: 80px;
  margin-right: 10px;
}
.shopcart .list .good .imgbox img {
  width: 100%;
}
.shopcart .list .good .text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.shopcart .list .good .text .name {
  font-weight: bold;
}
.shopcart .list .good .text .price {
  display: flex;
  justify-content: space-between;
}
.shopcart .list .good .text .price span {
  display: inline-block;
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  background-color: lightskyblue;
  color: white;
  border-radius: 50%;
}
.shopcart .list .good .text .price span:nth-child(2) {
  color: black;
  background-color: white;
}
.empty {
  text-align: center;
  padding: 50px;
}




</style>